import React, { useState } from 'react';
import { Article } from '@/interfaces/article';

interface ArticleMetaEditorProps {
  article: Article;
  onSave: (article: Article) => void;
  onCancel: () => void;
}

const ArticleMetaEditor: React.FC<ArticleMetaEditorProps> = ({ article, onSave, onCancel }) => {
  const [formData, setFormData] = useState({
    excerpt: article.excerpt,
    tags: article.tags.join(', '),
    category: article.category,
    coverImage: article.coverImage || '',
    status: article.status
  });

  const categories = ['Development', 'Design', 'Technology', 'Lifestyle', 'Business', 'Science'];

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    
    const updatedArticle: Article = {
      ...article,
      excerpt: formData.excerpt,
      tags: formData.tags.split(',').map(tag => tag.trim()).filter(tag => tag.length > 0),
      category: formData.category,
      coverImage: formData.coverImage,
      status: formData.status as 'draft' | 'published'
    };

    onSave(updatedArticle);
  };

  return (
    <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4 z-50">
      <div className="bg-white dark:bg-ios-gray-800 rounded-apple-xl shadow-apple-lg max-w-2xl w-full max-h-[90vh] overflow-auto">
        <div className="p-6">
          <div className="flex items-center justify-between mb-6">
            <h2 className="text-2xl font-bold text-ios-gray-900 dark:text-white">
              Article Settings
            </h2>
            <button
              onClick={onCancel}
              className="text-ios-gray-500 dark:text-ios-gray-400 hover:text-ios-gray-700 dark:hover:text-ios-gray-200"
            >
              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
          </div>

          <form onSubmit={handleSubmit} className="space-y-6">
            {/* Excerpt */}
            <div>
              <label className="block text-sm font-medium text-ios-gray-700 dark:text-ios-gray-300 mb-2">
                Excerpt
              </label>
              <textarea
                value={formData.excerpt}
                onChange={(e) => setFormData(prev => ({ ...prev, excerpt: e.target.value }))}
                placeholder="Brief description of your article..."
                rows={3}
                className="w-full p-3 border border-ios-gray-200 dark:border-ios-gray-600 rounded-apple-md bg-white dark:bg-ios-gray-700 text-ios-gray-900 dark:text-white placeholder-ios-gray-500 dark:placeholder-ios-gray-400 focus:ring-2 focus:ring-ios-blue focus:border-transparent"
              />
            </div>

            {/* Category */}
            <div>
              <label className="block text-sm font-medium text-ios-gray-700 dark:text-ios-gray-300 mb-2">
                Category
              </label>
              <select
                value={formData.category}
                onChange={(e) => setFormData(prev => ({ ...prev, category: e.target.value }))}
                className="w-full p-3 border border-ios-gray-200 dark:border-ios-gray-600 rounded-apple-md bg-white dark:bg-ios-gray-700 text-ios-gray-900 dark:text-white focus:ring-2 focus:ring-ios-blue focus:border-transparent"
              >
                <option value="">Select a category</option>
                {categories.map(category => (
                  <option key={category} value={category}>{category}</option>
                ))}
              </select>
            </div>

            {/* Tags */}
            <div>
              <label className="block text-sm font-medium text-ios-gray-700 dark:text-ios-gray-300 mb-2">
                Tags
              </label>
              <input
                type="text"
                value={formData.tags}
                onChange={(e) => setFormData(prev => ({ ...prev, tags: e.target.value }))}
                placeholder="React, TypeScript, Web Development"
                className="w-full p-3 border border-ios-gray-200 dark:border-ios-gray-600 rounded-apple-md bg-white dark:bg-ios-gray-700 text-ios-gray-900 dark:text-white placeholder-ios-gray-500 dark:placeholder-ios-gray-400 focus:ring-2 focus:ring-ios-blue focus:border-transparent"
              />
              <p className="text-xs text-ios-gray-500 dark:text-ios-gray-400 mt-1">
                Separate tags with commas
              </p>
            </div>

            {/* Cover Image */}
            <div>
              <label className="block text-sm font-medium text-ios-gray-700 dark:text-ios-gray-300 mb-2">
                Cover Image URL
              </label>
              <input
                type="url"
                value={formData.coverImage}
                onChange={(e) => setFormData(prev => ({ ...prev, coverImage: e.target.value }))}
                placeholder="https://example.com/image.jpg"
                className="w-full p-3 border border-ios-gray-200 dark:border-ios-gray-600 rounded-apple-md bg-white dark:bg-ios-gray-700 text-ios-gray-900 dark:text-white placeholder-ios-gray-500 dark:placeholder-ios-gray-400 focus:ring-2 focus:ring-ios-blue focus:border-transparent"
              />
            </div>

            {/* Status */}
            <div>
              <label className="block text-sm font-medium text-ios-gray-700 dark:text-ios-gray-300 mb-2">
                Status
              </label>
              <div className="flex space-x-4">
                <label className="flex items-center">
                  <input
                    type="radio"
                    value="draft"
                    checked={formData.status === 'draft'}
                    onChange={(e) => setFormData(prev => ({ ...prev, status: e.target.value as 'draft' | 'published' }))}
                    className="text-ios-blue focus:ring-ios-blue"
                  />
                  <span className="ml-2 text-ios-gray-700 dark:text-ios-gray-300">Draft</span>
                </label>
                <label className="flex items-center">
                  <input
                    type="radio"
                    value="published"
                    checked={formData.status === 'published'}
                    onChange={(e) => setFormData(prev => ({ ...prev, status: e.target.value as 'draft' | 'published' }))}
                    className="text-ios-blue focus:ring-ios-blue"
                  />
                  <span className="ml-2 text-ios-gray-700 dark:text-ios-gray-300">Published</span>
                </label>
              </div>
            </div>

            {/* Action Buttons */}
            <div className="flex justify-end space-x-3 pt-4">
              <button
                type="button"
                onClick={onCancel}
                className="px-4 py-2 text-ios-gray-600 dark:text-ios-gray-400 hover:text-ios-gray-800 dark:hover:text-ios-gray-200 transition-colors"
              >
                Cancel
              </button>
              <button
                type="submit"
                className="px-6 py-2 bg-ios-blue text-white rounded-apple-md hover:bg-ios-blue/90 transition-colors"
              >
                Save Settings
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  );
};

export default ArticleMetaEditor;